<template>
	<div class="app-container">
	<div v-if="showList">
		<el-form :model="cond">
			<el-row :gutter="10">
				<el-col :span="4">
					<el-form-item label="企业账号" label-width="80px">
						<el-input v-model="cond.company.simple.userId" placeholder="请输入内容" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label=企业中文名 label-width="100px">
						<el-input v-model="cond.company.companyChineseName" placeholder="请输入内容" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="企业区域" label-width="80px">
						<el-cascader v-model="companyLocation" :options="region_options" collapse-tags
									 placeholder="请选择（默认全部）" clearable style="width: 100%;"
									 @change="fillJsonLocation" :props="{multiple: true}">
						</el-cascader>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="企业性质" label-width="80px">
						<el-cascader v-model="companyNature" :options="natures" collapse-tags
									 placeholder="请选择（默认全部）" clearable style="width: 100%;"
						             @change="fillJsonNI" :props="{multiple: true}">
						</el-cascader>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="企业行业" label-width="80px">
						<el-cascader v-model="companyIndustry" :options="industries" collapse-tags
									 placeholder="请选择（默认全部）" clearable style="width: 100%;"
									 @change="fillJsonNI" :props="{multiple: true}">
						</el-cascader>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :span="10">
					<el-form-item label="调查期起始日所在范围（含端点）" label-width="250px">
						<el-date-picker v-model="dateRange" type="daterange" unlink-panels range-separator="至"
										start-placeholder="该日期之后（含）" end-placeholder="该日期之前（含）" :clearable=false
										style="width:100%"
						@change="fillJsonDate">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="3">
					<el-form-item label="所在月份" label-width="80px">
						<el-select v-model="cond.investigationPeriod.investigationMonth" placeholder="请选择" clearable>
							<el-option v-for="month in [1,2,3,4,5,6,7,8,9,10,11,12]" :label="month" :value="month" placeholder="请选择" clearable >
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="3">
					<el-form-item label="所在季度" label-width="80px">
						<el-select v-model="cond.investigationPeriod.investigationQuarter" placeholder="请选择" clearable>
							<el-option v-for="season in [1,2,3,4]" :label="season" :value="season" placeholder="请选择" clearable >
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" type="flex" justify="end">
				<el-col :span="2" :offset="6" align="right">
					<el-button type="primary" @click="fetchData" icon="el-icon-search" size="medium">查询</el-button>
				</el-col>
				<el-col :span="2" align="right">
					<el-button type="info" @click="resetCond" icon="el-icon-refresh-left" size="medium">重置</el-button>
				</el-col>
				<el-col :span="2" align="right">
					<el-button type="info" @click="exportExcel" icon="el-icon-document" size="medium">导出</el-button>
				</el-col>
				<el-col :span="1" align="right"></el-col>
			</el-row>
		</el-form>
		<el-row>
			<el-col :span="24" align="right">
				<el-button type="text" @click="" style="font-size: 17px;"></el-button>
			</el-col>
		</el-row>

		<el-table v-loading="listLoading" :data="viewData" element-loading-text="Loading" border fit
				  highlight-current-row :cell-style="{padding:'5px 0'}" stripe :cell-class-name="classChecker">
			<el-table-column prop="formId" label="报表序号" align="center" :min-width="'4%'" :max-width="'8%'">
			</el-table-column>
			<el-table-column prop="companyChineseName" align="center" label="企业名称" :min-width="'18%'" :max-width="'10%'">
			</el-table-column>
			<el-table-column prop="investigationStartDate" label="调查期开始" align="center" :min-width="'8%'" :max-width="'18%'">
			</el-table-column>
			<el-table-column prop="a" label="调查期结束" align="center" :min-width="'8%'" :max-width="'7%'">
				<template slot-scope="scope">
					{{ new Date(scope.row.investigationStartDate).addDays(scope.row.investigationLength).toISOString().split('T')[0] }}
				</template>
			</el-table-column>
			<el-table-column prop="start" label="原就业人数" align="center" :min-width="'5%'" :max-width="'10%'">
				<template slot-scope="scope">
					{{ scope.row.formStartTotalNum }}
				</template>
			</el-table-column>
			<el-table-column prop="end" label="调查期内变化" align="center" :min-width="'5%'" :max-width="'7%'">
				<template slot-scope="scope">
					{{ scope.row.formEndTotalNum - scope.row.formStartTotalNum}}
				</template>
			</el-table-column>
			<el-table-column prop="formDecreaseType" label="减少原因类型" align="center" :min-width="'8%'" :max-width="'10%'">
			</el-table-column>
			<el-table-column prop="formFirstReason" label="第一减少原因" align="center" :min-width="'8%'" :max-width="'10%'">
			</el-table-column>
			<el-table-column prop="a" fixed="right" align="center" label="操作" :min-width="'5%'" :max-width="'13%'">
				<template slot-scope="scope">
					<el-button @click="jump2DetailedInfo(scope.row)" ttype="primary" plain>详细信息
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" :current-page="page.currentPage"
					   :page-sizes="[10, 20, 50]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
					   :total="page.totalItems">
		</el-pagination>
	</div>
		<detailed-info v-if="showForm" :entry="entry"  @update-parameter="goBackShowList" >
		</detailed-info>
	</div>
</template>

<script>
import {getIndustries, getNatures} from "@/api/province/dataVisualization";
import {exportCurrentFormList, getRequiredFormListJoin} from "@/api/province/formQuery";
import detailedInfo from './detailedInfo.vue';
import {save} from "@/utils/download";
import Da from "element-ui/src/locale/lang/da";
import {getLocations} from "@/api/enterprise/enterpriseRecord";

const defaultCond = {
	company:{
		simple: {userId: null},
		companyChineseName: null,
		companyLocation: [],
		companyNature: [],
		companyIndustry: [],
		companyCity: null
	},
	investigationPeriod: {
		investigationBegin: null,
		investigationEnd: null,
		investigationMonth: null,
		investigationQuarter: null
	}
}

export default {
	computed: {
		Da() {
			return Da
		}
	},
	data() {
		return {
			list: [],
			viewData: [],
			listLoading: true,
			page: {
				currentPage: 1,
				pageSize: 10,
				totalItems: 0,
			},

			cond: JSON.parse(JSON.stringify(defaultCond)),
			companyLocation: null,
			companyNature: null,
			companyIndustry: null,

			natures: getNatures(),
			industries: getIndustries(),
			region_options: getLocations(),

			dateRange: null,
			showList: true,
			showForm: false,
			entry: null
		}
	},

	created() {
		this.fetchData()
		this.cond.company.companyCity = this.$store.getters.roleId === 2 ? this.$store.getters.userId : null
	},

	components: {
		'detailed-info': detailedInfo
	},

	methods: {
		fetchData() {
			this.listLoading = true
			getRequiredFormListJoin(this.cond).then(response => {
				this.list = response.data.sort((a, b) => b.formId - a.formId)
				this.page.totalItems = this.list.length
				this.display()
				this.listLoading = false
				}
			)
		},

		fillJsonDate(){
			this.cond.investigationPeriod.investigationBegin = this.dateRange[0].toLocaleDateString().replace(/\//g, '-')
			this.cond.investigationPeriod.investigationEnd = this.dateRange[1].toLocaleDateString().replace(/\//g, '-')
		},

		fillJsonNI(){
			this.cond.company.companyIndustry = []
			this.cond.company.companyNature = []
			this.companyIndustry.forEach(v => {this.cond.company.companyIndustry.push(v.join("/"))})
			this.companyNature.forEach(v => {this.cond.company.companyNature.push(v.join("/"))})
		},

		fillJsonLocation(){
			this.cond.company.companyLocation = []
			this.companyLocation.forEach(v => {this.cond.company.companyLocation.push(v.join("/"))})
		},

		resetCond() {
			this.cond = JSON.parse(JSON.stringify(defaultCond))
			this.companyNature = null
			this.companyIndustry = null
			this.companyLocation = null
			this.dateRange = null
		},

		display() {
			// console.log(this.list)
			this.viewData = this.list.slice((this.page.currentPage - 1) * this.page.pageSize, Math.min(this.page.totalItems, this.page.currentPage * this.page.pageSize))
			// console.log(this.viewData)
		},

		exportExcel(){
			exportCurrentFormList(encodeURIComponent(JSON.stringify(this.cond))).then(response =>{
				save(Date.now() + '.xlsx', response)
			})
		},

		goBackShowList(newValue) {
			this.showForm = newValue.sForm;
			this.showList = newValue.sList;
		},

		jump2DetailedInfo(entry) {
			this.showForm = true;
			this.showList = false;
			this.entry = entry;
		},

		changePageSize(val) {
			this.page.pageSize = val;
			this.display();
		},

		changeCurrentPage(val) {
			this.page.currentPage = val;
			this.display();
		},

		classChecker({ row, column }) {
			// console.log(column.property)
			if (column.property === 'end') {
				const val = row.formEndTotalNum - row.formStartTotalNum;
				// console.log(val)
				if (val > 0 ) {
					return 'greenClass'
				} else if (val < 0) {
					return 'redClass'
				}
			}
			return ''
		}
	},
}

Date.prototype.addDays = function(days) {
	var date = new Date(this.valueOf());
	date.setDate(date.getDate() + days);
	return date;
}

</script>

<style>
.el-table .greenClass{
	color: green;
}

.el-table .redClass{
	color: red;
}
</style>
